---
import '../styles/global.css';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
const pageTitle = "关于我";
const identity = {
  firstName: "莎拉",
  country: "加拿大",
  occupation: "技术撰稿人",
  hobbies: ["摄影", "观鸟", "棒球"],
};
const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
const happy = true;
const finished = true;
const goal = 3;
const skillColor = "navy";
---

<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
    <style define:vars={{skillColor}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    {happy && <p>我非常乐意学习 Astro！</p>}

    {finished && <p>我完成了这节教程！</p>}

    {goal === 3 ? <p>我的目标是在三天内完成。</p> : <p>我的目标不是 3 天。</p>}
    <p>以下是关于我的几个事实：</p>
    <ul>
      <li>我的名字是{identity.firstName}.</li>
      <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
      {
        identity.hobbies.length >= 2 && (
          <li>
            我的两个习惯：{identity.hobbies[0]}和{identity.hobbies[1]}
          </li>
        )
      }
    </ul>
    <p>我的技能是：</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    <Footer />
  </body>
</html>
